<template>
  <view class="flex-col">
    <view class="container">
      <a-tab @change="change" v-model="actived"
             :dict="{ list: menus, label: 'label', value: 'value' }"/>
    </view>
    <view class="content">
      <view v-if="actived === '0'">
        <!--//申请信息-->
        <apply-message v-model="ruleForm"/>
      </view>
      <view v-if="actived === '1'">
        <!--//处置记录-->
        <dispose-message v-model="ruleForm" :vehicleDisposalId="vehicleDisposalId"/>
      </view>
      <view v-if="actived === '2'">
        <!--//残值记录-->
        <salvage-message v-model="ruleForm"/>
      </view>
      <view v-if="actived === '3'">
        <!--//撤销处置-->
        <cancels-message v-model="ruleForm"/>
      </view>
      <view v-if="actived === '4'">
        <!--//过户信息-->
        <ownership-message v-model="ruleForm"/>
      </view>
      <view v-if="actived === '5'">
        <!--//操作记录-->
        <controls-message v-model="ruleForm"/>
      </view>
    </view>
  </view>
</template>

<script>
import * as apis from '@/api/routineHandle'
import applyMessage from "./components/applyMessage.vue"
import disposeMessage from './components/disposeMessage.vue'
import salvageMessage from './components/salvageMessage.vue'
import cancelsMessage from './components/cancelsMessage.vue'
import ownershipMessage from './components/ownershipMessage.vue'
import controlsMessage from './components/controlsMessage.vue'

export default {
  name: 'details',
  components: {
    applyMessage,
    disposeMessage,
    salvageMessage,
    cancelsMessage,
    ownershipMessage,
    controlsMessage
  },
  computed: {},
  watch: {},
  data() {
    return {
      menus: [
        {label: '申请信息', value: '0'},
        {label: '处置记录', value: '1'},
        {label: '残值记录', value: '2'},
        {label: '撤销处置', value: '3'},
        {label: '过户信息', value: '4'},
        {label: '操作记录', value: '5'},
      ],
      actived: '0',
      ruleForm: {},
      vehicleDisposalId: ''
    };
  },
  onLoad(op) {
    this.flowId = op?.flowId
    this.vehicleDisposalId = op?.id
    this.handleDetails(op?.id)
  },
  created() {
  },
  mounted() {
  },
  methods: {

    change(e) {
      this.actived = e.value
      console.log(e)
    },

    async handleDetails(id) {
      try {
        let obj = {
          vehicleDisposalNo: id
        }
        const res = await apis.getInfo(obj)
        this.ruleForm = res.data || {}
      } catch (e) {
        console.error(e)
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
}

</style>


